<template>
  <div class="sale_data">
    <div class="title">
      <div class="left">
        <h3>销售数据</h3>
        <span>{{ this.timeInfo.start }} ~ {{ this.timeInfo.end }}</span>
      </div>
      <div>
        <el-date-picker
          v-model="timeInfoArray"
          type="daterange"
          size="mini"
          range-separator="~"
          :start-placeholder="timeInfo.start"
          :end-placeholder="timeInfo.end"
          :unlink-panels="true"
        >
        </el-date-picker>
      </div>
      <div class="button">
        <span :class="{active:isActive === 'week'}" @click="selectDate('week')">周</span>
        <span :class="{active:isActive === 'month'}" @click="selectDate('month')">月</span>
        <span :class="{active:isActive === 'year'}" @click="selectDate('year')">年</span>
      </div>
    </div>
    <div class="echart">
      <div class="myechart">
        <div class="pic"><img src="~@/assets/images/empty.png" alt="" /></div>
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>
<script>
// 引入时间处理器
import { getCurrentDay, getWeek, getMonth, getyYear } from '@/plugins/formatDate.js'
export default {
  name: 'SaleEchart',
  data() {
    return {
      // 时间选择样式
      isActive: 'week',
      // 时间
      timeInfo: {
        start: getWeek(), // 开始
        end: getCurrentDay() // 结束
      },
      timeInfoArray: [getWeek(), getCurrentDay()]
    }
  },
  methods: {
    // 年月日事件选择
    selectDate(value) {
      this.timeInfoArray = [getWeek(), getCurrentDay()]
      // 年所需类型
      // 样式
      this.isActive = value
      // 时间
      this.timeInfo.start =
        value === 'week' ? getWeek() : value === 'year' ? getyYear() : getMonth()
      this.timeInfoArray.splice(0, 1, this.timeInfo.start)
    }
  }
}
</script>
<style lang="less" scoped>
.sale_data {
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      h3 {
        font-size: 16px;
        color: #333;
      }
      span {
        color: #999;
        font-size: 12px;
        margin-left: 10px;
        height: 20px;
        line-height: 27px;
      }
    }
    .button {
      width: 129px;
      height: 34px;
      background: rgba(233, 243, 255, 0.37);
      border-radius: 10px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      span {
        width: 37px;
        height: 25px;
        font-size: 14px;
        color: #9ca3b4;
        cursor: pointer;
        text-align: center;
        line-height: 25px;
      }
      .active {
        background: #fff;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
        border-radius: 7px;
        font-weight: 600;
        color: #333;
      }
    }
  }
  .echart {
    .pic {
      width: 123px;
      height: 96px;
    }
    p {
      margin-top: 25px;
      color: #20232a;
      font-size: 14px;
    }
  }
  .scatterEhartRef {
    margin-left: 40px;
  }
}
</style>
